    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <script type="text/javascript" src="/mes/js/vue.js"></script>
    <script type="text/javascript" src="/mes/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="power" >
    <span class="demonstration">选择职位:</span>
    <el-select v-model="value" placeholder="请选择角色" @change="gr()">
        <el-option
                :disabled="item.disabled"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
        >
        </el-option>
    </el-select>
    <el-tree
        :data="data2"
        show-checkbox
        node-key="id"
        ref="tree"

        :default-expanded-keys="opened"
        :default-checked-keys="checked"
        :props="defaultProps">

      <span class="custom-tree-node" slot-scope="{ node, defaultProps }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(defaultProps)">
            Append
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, defaultProps)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
        <el-button type="primary" @click="submit">确认修改</el-button>

</div>



</body>
<script>
    var vm=new Vue({
        el:"#power",
        data:{
            value:'',
            options:[],
            down:[],
            checked:[],
            opened:[],
            data2: [],
            defaultProps: {
                children: 'children',
                label: 'label',
                id:1000,
            }
        },
        methods:{
            gr:function(){
                this.$refs.tree.setCheckedNodes([])
               axios.post("/industry/log/getPowerByUsername",{
                    id:this.value
                }).then(function (response) {
                    var check=[]
                    for (var i = 0; i < response.data.length; i++) {
                        if(response.data[i].pid!=null){
                            check.push(response.data[i].id)
                        }
                    }
                    vm.checked=check;
                })
            },
            submit:function(){
                    var a=[]
                for (var i = 0; i <this.$refs.tree.getCheckedNodes(false,true).length ; i++) {
                    a.push(this.$refs.tree.getCheckedNodes(false,true)[i].id)
                }
                axios.post("/industry/log/submitPower",{
                    id:a,
                    role:vm.value
                }).then(function (response) {
                    vm.success();
                    vm.loadingData();
                })
            },
            success:function(){
                    this.$notify({
                        title: '修改成功',
                        message: '权限修改已生效',
                        type: 'success'
                    });
            },
            append(defaultProps) {
                const newChild = { id: id++, label: 'testtest', children: [] };
                if (!data.children) {
                    this.$set(defaultProps, 'children', []);
                }
                data.children.push(newChild);
            },

            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },
            //重新加载
            loadingData:function () {
                axios.post("/industry/log/getRole").then(function (response) {
                    var a={
                        value:'',
                        label:'',
                        disabled:false
                    }
                    for (var i = 0; i <response.data.length ; i++) {
                        a.value=response.data[i].id;
                        a.label=response.data[i].name;
                        if(response.data[i].name=='admin'){
                            a.disabled=true
                        }
                        vm.options.push(a)
                        a={value:'',label:''}
                    }

                })

                var a={
                    id:'',
                    label:'',
                    children:[]
                };
                var b={
                    id:'',
                    label:''
                }
                axios.post("/industry/log/getPower").then(function (response) {
                    for (var i = 0; i < response.data.length; i++) {
                        if( response.data[i].pid==null){
                            a.id=response.data[i].id;
                            a.label=response.data[i].name;
                            for (var j = 0; j <response.data.length;j++) {
                                if(response.data[j].pid==response.data[i].id){
                                    b.id=response.data[j].id;
                                    b.label=response.data[j].name;
                                    a.children.push(b);
                                    b={id:'',label:''}
                                }
                            }
                            vm.data2.push(a);
                            a={id:'',label:'',children:[]}
                        }
                    }

                })
            }
        },
        created:function(){
            axios.post("/industry/log/getRole").then(function (response) {
                var a={
                    value:'',
                    label:'',
                    disabled:false
                }
                for (var i = 0; i <response.data.length ; i++) {
                    a.value=response.data[i].id;
                    a.label=response.data[i].name;
                    if(response.data[i].name=='admin'){
                        a.disabled=true
                    }
                    vm.options.push(a)
                    a={value:'',label:''}
                }

            })

            var a={
                id:'',
                label:'',
                children:[]
            };
            var b={
                id:'',
                label:''
            }
           axios.post("/industry/log/getPower").then(function (response) {
              for (var i = 0; i < response.data.length; i++) {
                   if( response.data[i].pid==null){
                       a.id=response.data[i].id;
                       a.label=response.data[i].name;
                       for (var j = 0; j <response.data.length;j++) {
                           if(response.data[j].pid==response.data[i].id){
                               b.id=response.data[j].id;
                               b.label=response.data[j].name;
                              a.children.push(b);
                              b={id:'',label:''}
                           }
                       }
                       vm.data2.push(a);
                      a={id:'',label:'',children:[]}
                   }
               }

            })
        }
    })


    /*  var a=[];
      a.push(1);
      vm.opened=a;*/
</script>
</html>